<template>
  <el-dialog
    top="8vh"
    :title="dialog.title"
    :visible.sync="dialog.visible"
    width="1000px"
    @close="onClose"
  >
    <el-form ref="elForm" :model="formData" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="6">
          <el-form-item label-width="30px" prop="imgUrl">
            <el-upload
              ref="imgUrl"
              :file-list="imgUrlfileList"
              :action="imgUrlAction"
              :before-upload="imgUrlBeforeUpload"
              list-type="picture-card"
            >
              <i class="el-icon-plus"></i>
              <div slot="tip" class="el-upload__tip">
                只能上传不超过 2MB 的文件
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-col :span="12">
            <el-form-item label="广告位名称" prop="title">
              <el-input
                v-model="formData.title"
                placeholder="请输入广告位名称"
                :maxlength="100"
                show-word-limit
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="跳转方式" prop="target">
              <el-select
                v-model="formData.target"
                placeholder="请选择跳转方式"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in targetOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="status" required>
              <el-switch v-model="formData.status"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="时间限制" prop="isTimeLimit" required>
              <el-switch v-model="formData.isTimeLimit"></el-switch>
            </el-form-item>
          </el-col>
          <el-col v-show="formData.isTimeLimit" :span="12">
            <el-form-item label="开始时间" prop="beginTime">
              <el-date-picker
                v-model="formData.beginTime"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{ width: '100%' }"
                placeholder="请选择开始时间"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col v-show="formData.isTimeLimit" :span="12">
            <el-form-item label="结束时间" prop="endTime">
              <el-date-picker
                v-model="formData.endTime"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{ width: '100%' }"
                placeholder="请选择结束时间"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="链接地址" prop="linkUrl">
              <el-input
                v-model="formData.linkUrl"
                placeholder="请输入链接地址"
                :maxlength="128"
                show-word-limit
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="权重" prop="sort" required>
              <el-slider
                v-model="formData.sort"
                show-input
                :max="100"
                :step="1"
              ></el-slider>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="广告描述" prop="summary">
              <el-input
                v-model="formData.summary"
                type="textarea"
                placeholder="请输入广告描述"
                :maxlength="500"
                show-word-limit
                :autosize="{ minRows: 3, maxRows: 3 }"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="广告代码" prop="codes">
              <el-input
                v-model="formData.codes"
                type="textarea"
                placeholder="请输入广告代码"
                :maxlength="500"
                show-word-limit
                :autosize="{ minRows: 3, maxRows: 3 }"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button
        type="primary"
        :loading="dialog.btnLoading"
        @click="handelConfirm"
      >
        确 定
      </el-button>
    </span>
  </el-dialog>
</template>
<script>
  import { add, update } from '@/api/cms/adv'
  import { deepClone } from '@/utils/index'
  export default {
    data() {
      return {
        dialog: {
          title: '添加广告位',
          visible: false,
          btnLoading: false,
        },
        formData: {
          columnId: 0,
          title: undefined,
          target: '',
          status: true,
          isTimeLimit: false,
          beginTime: null,
          endTime: null,
          linkUrl: undefined,
          sort: 1,
          imgUrl: null,
          summary: undefined,
          codes: undefined,
        },
        rules: {
          title: [
            {
              required: true,
              message: '请输入广告位名称',
              trigger: 'blur',
            },
          ],
          target: [
            {
              required: true,
              message: '请选择跳转方式',
              trigger: 'change',
            },
          ],
          beginTime: [],
          endTime: [],
          linkUrl: [
            {
              required: true,
              message: '请输入链接地址',
              trigger: 'blur',
            },
          ],
          summary: [],
          codes: [],
        },
        imgUrlAction: 'https://jsonplaceholder.typicode.com/posts/',
        imgUrlfileList: [],
        targetOptions: [
          {
            label: '新窗口',
            value: '_blank',
          },
          {
            label: '原窗口',
            value: '_self',
          },
        ],
      }
    },
    methods: {
      onClose() {
        this.$refs['elForm'].resetFields()
      },
      close() {
        this.$refs['elForm'].resetFields()
        this.formData.title = undefined
        this.dialog.visible = false
      },
      handleAdd(m) {
        this.formData.id = undefined
        this.formData.columnId = m.id
        this.dialog.title = '添加广告位项'
        this.dialog.visible = true
      },
      handelModify(record) {
        this.dialog.title = '编辑广告位项'
        this.dialog.visible = true
        this.formData = deepClone(record)
      },
      imgUrlBeforeUpload(file) {
        let isRightSize = file.size / 1024 / 1024 < 2
        if (!isRightSize) {
          this.$message.error('文件大小超过 2MB')
        }
        return isRightSize
      },
      handelConfirm() {
        this.$refs['elForm'].validate(async (valid) => {
          if (!valid) return
          let tipName = '添加成功'
          let res = null
          if (!this.formData.id) {
            res = await add(this.formData)
          } else {
            tipName = '修改成功'
            res = await update(this.formData)
          }
          if (res.code == 200) {
            this.close()
            this.$emit('complete')
            this.$notify({
              message: tipName,
              type: 'success',
            })
          } else {
            this.$notify({
              message: message,
              type: 'error',
            })
          }
        })
      },
    },
  }
</script>
